<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            width: 480px;
            margin: 50px auto;
        }

        .wrap .nav {
            width: 480px;
            overflow: hidden;
            text-align: center;
            line-height: 40px;

        }

        .wrap .nav li {
            float: left;
            width: 80px;
            border: 1px solid #333;
            box-sizing: border-box;
        }

        .wrap .nav li+li {
            border-left: 0;
        }

        .wrap .nav .active {
            background-color: aquamarine;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="nav">
            <!-- <li data-index="0">link_01</li>
            <li data-index="1">link_02</li>
            <li data-index="2">link_03</li>
            <li data-index="3">link_04</li>
            <li data-index="4">link_05</li>
            <li data-index="5">link_06</li> -->

            <li>link_01</li>
            <li>link_02</li>
            <li>link_03</li>
            <li>link_04</li>
            <li>link_05</li>
            <li>link_06</li>
        </div>
    </div>
</body>
<script>
    var liList = document.querySelectorAll(".nav li");
    console.log(liList);

    /*  
    liList[0].onclick = function () {
         // this
         // liList[0].style.backgroundColor = "#6ff";
         // liList[0].style.color = "#fff";
 
         liList[0].setAttribute("class","active");
     }
     liList[1].onclick = function () {
          // this
         liList[1].setAttribute("class","active");
     }
     liList[2].onclick = function () {
          // this
         liList[2].setAttribute("class","active");
     } */

    // 多元素循环绑的事件的问题?
    // (1) 页面加载时,只是循环绑定事件,事件不会触发 => 循环结束后:li是最后一个li(<li>link_06</li>),i是不满足条件的第一个元素6
    // (2) 点击事件肯定发生在页面加载之后,此时点击元素后,执行事件函数中的代码 => 函数内没有定义自己的li和i => 向外跳一层找父作用域(全局作用域) =>  全局作用于此时的li和i:  <li>link_06</li>  6

    // 解决方法
    // (1) 既然li和i已经不行了,有没有替换的方案
    // li(当前被点击的元素)    => this(在事件中就是绑定事件的元素)
    // i (当前被点击的元素的下标)  => a. 通过给每个元素绑定自定义属性(记录每个元素的下标),点击时取值  b. 查找当前被点击的元素在集合中位置

    // (2) 分析问题: 事件触发时=> 函数内没有定义自己的li和i => 向外跳一层找父作用域(全局作用域) => 如果能找循环当前的li和i,刚好一一对应
    // 如何让事件访问循环当前的li和i? 
    // a. 在事件和循环之间包裹一个新的作用域 (ES5 => 函数作用域)


    /*  debugger;
     for (var i = 0; i < liList.length; i++) {
         // 函数会执行6次
         function fn(i) { // 形参 接收下标 => 局部变量
             var li = liList[i];  // 局部变量
             // 此处在页面加载时,只是绑定事件  => 事件不会触发
             li.onclick = function () {
                 debugger;
                 // 事件触发时=> 函数内没有定义自己的li和i => 向外跳一层找父作用域(函数作用域fn) =>  (fn执行了6次 => 循环当前的li和i)
                 li.setAttribute("class", "active");
                 console.log(li, i);
             }
         }
         fn(i); // 实际参数  循环下标
     }
     console.log("循环结束后", i); */


    // 匿名函数自调用版
    /* debugger;
    for (var i = 0; i < liList.length; i++) {
        // 函数会执行6次
        (function(i) { // 形参 接收下标 => 局部变量
            var li = liList[i];  // 局部变量
            // 此处在页面加载时,只是绑定事件  => 事件不会触发
            li.onclick = function () {
                debugger;
                // 事件触发时=> 函数内没有定义自己的li和i => 向外跳一层找父作用域(函数作用域fn) =>  (fn执行了6次 => 循环当前的li和i)
                li.setAttribute("class", "active");
                console.log(li, i);
            }
        })(i); // 实际参数  循环下标
    }
    console.log("循环结束后", i); */


    Array.from(liList).forEach(function (item, index) {
        item.onclick = function () {
            console.log(item, this, index);
        }
    })


    /* fn(0); // 实际参数  循环下标
    function fn(i) { // 形参 接收下标 => 局部变量 0
        var li = liList[i];  // 局部变量  // liList[0]
        // 此处在页面加载时,只是绑定事件  => 事件不会触发
        li.onclick = function () {
            debugger;
            // 事件触发时=> 函数内没有定义自己的li和i => 向外跳一层找父作用域(函数作用域fn) =>  (fn执行了6次 => 循环当前的li和i)
            li.setAttribute("class", "active");
            console.log(li, i);
        }
    }

    fn(1); // 实际参数  循环下标
    function fn(i) { // 形参 接收下标 => 局部变量 1
        var li = liList[i];  // 局部变量  // liList[1]
        // 此处在页面加载时,只是绑定事件  => 事件不会触发
        li.onclick = function () {
            debugger;
            // 事件触发时=> 函数内没有定义自己的li和i => 向外跳一层找父作用域(函数作用域fn) =>  (fn执行了6次 => 循环当前的li和i)
            li.setAttribute("class", "active");
            console.log(li, i);
        }
    } */






</script>

</html>